<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {clone} from "@renderer/utils";
import {dateFormat} from "../../utils";

const route = useRoute()
const router = useRouter()

let member = ref({})
let members = ref([])
let globalData = ref({})
const consumeFormData = ref({
  amount: 0
})

const parseCurrency = (input) => {
  const nums = input.replace(/(,|¥|\s)/g, "").trim();
  if (/^\d+(\.(\d+)?)?$/.test(nums))
    return Number(nums);
  return nums === "" ? null : Number.NaN;
}

const format = (datetime) => {
  return dateFormat(datetime, 'yyyy-MM-dd hh:mm:ss')
}

const handleConsumeClick = () => {

}

//搜索会员
const handleMemberSearch = (val) => {
  loadMembers(val)
}

//切换会员
const handleMemberChange = (val) => {
  loadMemberInfo(val)
}

//取消
const handleCanelClick = () => {
  router.replace({path: '/consume'})
}

//加载会员信息
const loadMemberInfo = (memberid) => {
  member.value = {}
  window.electron.ipcRenderer.invoke("renderer-to-main", {
    name: 'app-member-view',
    event: 'event',
    data: memberid
  })
}
//加载所有符合条件会员
const loadMembers = (val) => {
  window.electron.ipcRenderer.invoke("renderer-to-main", {
    name: 'app-member-lookup',
    event: 'event',
    data: clone({
      mobile: val
    })
  })
}

const loadGlobal = () => {
  window.electron.ipcRenderer.invoke("renderer-to-main", {
    name: 'app-global-get',
    event: 'event',
    data: null
  })
}

onMounted(() => {
  window.electron.ipcRenderer.on('main-to-renderer', (e, data) => {
    const event = data.data
    if(data.name === 'member-view-success'){//会员详情
      member.value = event
    }else if(data.name === 'member-lookup-success'){
      members.value = event
    }else if(data.name === 'global-get-success'){
      if(event){
        globalData.value = event
      }
    }
  })
  if(route.query.memberid){
    loadMemberInfo(route.query.memberid)
  }
  loadGlobal()
})
</script>

<template>
<div class="consume-container">
  <n-split direction="horizontal" :min="0.70" :max="0.70" :default-size="0.70">
    <template #1>
      <div class="left">
        <h1>普通消费</h1>
        <n-form ref="loyaltyFormRef" :label-width="80" :model="member" size="small">
          <n-grid x-gap="12" :cols="2">
            <n-gi>
              <n-form-item label="会员名称" path="name">
                <n-select
                    v-model:value="consumeFormData.id"
                    filterable
                    placeholder="请输入手机号检索"
                    :options="members"
                    clearable
                    remote
                    :clear-filter-after-select="false"
                    @search="handleMemberSearch"
                    :on-update:value="handleMemberChange"
                />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="手机号" path="mobile">
                {{ member.member?.mobile }}
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="会员卡号">
                <template v-if="!member.cards || member.cards.length <= 0">
                  <div style="width:100%; background: linear-gradient(to bottom, #d7de00, #18a058);padding: 0 5px;font-size: 20px; font-weight: bold; color: #333333;">
                    暂未开卡
                  </div>
                </template>
                <template v-else>
                  <template v-for="item in member.cards">
                    <div style="width:100%; background: linear-gradient(to bottom, #d7de00, #18a058);padding: 0 5px;font-size: 20px; font-weight: bold; color: #333333;" v-if="item.type == 1">
                      {{item.cardno}}
                    </div>
                  </template>
                </template>
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="卡内余额">
                <template v-if="!member.cards || member.cards.length <= 0">
                  <div style="padding: 0 5px;font-size: 20px; font-weight: bold; color: #cc3344;">
                    -
                  </div>
                </template>
                <template v-else>
                  <template v-for="item in member.cards">
                    <div style="padding: 0 5px;font-size: 20px; font-weight: bold; color: #cc3344;" v-if="item.type == 1">
                      ￥{{item.balance.toFixed(2)}}
                    </div>
                  </template>
                </template>
              </n-form-item>
            </n-gi>
            <n-gi span="24">
              <h1>消费详情</h1>
            </n-gi>
            <n-gi>
              <n-form-item label="消费项目" path="amount">
                <n-input placeholder="请输入消费项目" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="项目单价" path="amount">
                <n-input placeholder="请输入项目单价" disabled />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="数量" path="amount">
                <n-input placeholder="请输入数量" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="结算金额" path="amount">
                <n-input-number
                    v-model:value="consumeFormData.amount"
                    :default-value="0"
                    :parse="parseCurrency"
                    :validator="(x: number) => x > 0"
                />
              </n-form-item>
            </n-gi>
          </n-grid>
        </n-form>
      </div>
    </template>
    <template #2>
      <div class="right">
        <div class="order">
          <h1>{{ globalData.store }}</h1>
          <h2>订单详情</h2>
          {{format(new Date())}}
          <table border="0" width="100%" cellspacing="0" cellpadding="0">
            <tr>
              <th align="left" style="width: 120px">项目</th>
              <th align="center">数量</th>
              <th align="right">小计</th>
            </tr>
            <tr>
              <td colspan="3" style="border-bottom: #000 double 3px"></td>
            </tr>
            <tr>
              <td align="left">剪发染发烫发洗发一体化</td>
              <td align="center">*1</td>
              <td align="right">￥30.00</td>
            </tr>
            <tr>
              <td align="left">剪发染发烫发洗发一体化</td>
              <td align="center">*1</td>
              <td align="right">￥30.00</td>
            </tr>
            <tr>
              <td colspan="3" style="border-top: #000 double 3px">
                合计：￥30.00
              </td>
            </tr>
            <tr>
              <td colspan="3" style="height: 30px"></td>
            </tr>
            <tr>
              <td colspan="3">
                <p>{{ globalData.store }}</p>
                <p>热线：{{ globalData.hotline }}</p>
                <p>{{globalData.address}}</p>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </template>
  </n-split>
  <div class="dreamer-modal-footer">
    <n-space>
      <n-button type="default" size="small" attr-type="button" @click="handleCanelClick">取消</n-button>
      <n-button type="primary" size="small" attr-type="button" @click="handleConsumeClick">消费</n-button>
    </n-space>
  </div>
</div>
</template>

<style scoped lang="less">
:deep(.n-form-item-label){
  color: #333333 !important;
}
.consume-container{
  .left{
    padding-right: 15px;
    h1{
      font-size: 20px;
      margin-bottom: 10px;
    }
  }
  .right{
    padding-left: 15px;
    .order{
      background-color: #ffffff;
      padding: 10px;
    }
  }
}
</style>
